<template>
  <el-dialog title="添加人员" :visible.sync="dialogFormVisible">
    <div class="dialog-main">
      <div class="tree-left">
        <DeptTreeSelect style="height: 400px" ref="DeptTreeSelect" @handleNodeClick="handleNodeClick"
          @changeNode="changeNode" @CheckedNodesIds="CheckedNodesIds" @unchangeNode="unchangeNode"></DeptTreeSelect>
      </div>
      <div class="table-right">
        <el-table ref="multipleTable" :row-key="getRowKeys" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" :reserve-selection="true">
          </el-table-column>
          <el-table-column label="编号" width="80">
            <template slot-scope="scope">{{ scope.row.index }}</template>
          </el-table-column>
          <el-table-column prop="nickName" label="姓名">
          </el-table-column>
          <el-table-column prop="deptName" label="部门" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="submitAddedUsers">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import DeptTreeSelect from "@/components/DeptTreeSelect/index";
import { listUser } from "@/api/system/user";
export default {
  components: { DeptTreeSelect },
  props:['selectedUsers'],
  data() {
    return {
      dialogFormVisible: false,
      CheckedDeptIds: [],
      multipleSelection: [],
      tableData: [],
      total:0,
      currentKey:[],
      selectedRows:[],
      perSelectedRows:[],
    }
  },
  mounted() {
    console.log('selectusers mounted');
  },
  methods: {
    getRowKeys(row){
      return row.userId;
    },
    getDeptPersonnel(deptIds) {
      let params={};
      if(deptIds){
        params.deptId=deptIds;
      };
      listUser(params).then(response => {
          this.tableData = response.rows.map((_,index) => {
            return {..._,deptName:_.dept.deptName??'',index:index+1,userName:_.nickName??_.userName}
          });
          this.total = response.total;
          this.toggleSelection();
        }
      );
    },
    //点击部门展示相关部门人员
    handleNodeClick(val) {
      this.getDeptPersonnel(val.deptId);
    },
    changeNode(val, Boolean) {

    },
    unchangeNode() {
      this.$refs.dialogTable.clearSelection();
    },
    CheckedNodesIds(ids, val) {
      this.CheckedDeptIds = ids;
    },
    toggleSelection() {
      let rows=this.selectedUsers ?? this.multipleSelection;   
      if(rows){
        rows.map(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true)
        })
      }else{
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection=val;
    },
    submitAddedUsers(){
      const uniqueArr=this.multipleSelection.reduce((acc, curr) => {
        if(!acc.find(item => item.userId==curr.userId)){
          acc.push(curr);
        }
        return acc
      },[])
      this.$emit('getData',uniqueArr);
      this.dialogFormVisible=false;
    }
  }
}
</script>
<style lang="scss" scoped>
  .dialog-main{
    display:flex;
    .tree-left{
      width:200px;
    }
    .table-right ::v-deep{
      flex:1;
    }
  }
</style>